<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2022/10/11
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="container">
    <div class="row head">
        <div class="col-md-3">
            <a href=""><img src="../images/detail_logo.png" class="photo"></a>
        </div>
        <div class="col-md-6">
            <form >
                <input type="text" class="search-k" placeholder="小郑真帅">
                <a href="" class="search-W">搜索</a>
            </form>

        </div>
        <div class="col-md-3">
            <div class="my-cart">
                <a href=""><img src="../images/detail_my-cart.svg" class="cart"></a>
                <a href="../personal/myShopcar.jsp" class="my">我的购物车</a>
            </div>
        </div>
    </div>
    <div class="row shop">
        <div class="col-md-12">
            <div class="shop1">
                <img src="../images/detail_shop1.jpg.avif" >
            </div>
            <span class="name-shop">闪电秒杀官方旗舰店</span>
            <div class="love-me">
                <a href="" class="love"><img src="../images/detail_love.svg" > </a>
                <a href="" class="follow"> 关注我</a>
            </div>
        </div>
    </div>
    <div class="row navigation">
        <div class="col-md-2 B "><a href="" class="A">首页</a> </div>
        <div class="col-md-2 B"><a href="" class="A">小米</a></div>
        <div class="col-md-2 B"><a href="" class="A">华为</a></div>
        <div class="col-md-2 B"><a href="" class="A">苹果</a></div>
        <div class="col-md-2 B"><a href="" class="A">红米</a></div>
        <div class="col-md-2 B"><a href="" class="A">摩托摩拉</a></div>
    </div>
    <div class="row">
        <div class="col-md-12"></div>
    </div>
    <div class="row details">
        <div class="col-md-4">
            <div class="layui-carousel P" id="test10">
                <div carousel-item="">
                    <div><img src="${productimg.productImgX1}" tppabs="http://res.layui.com/static/images/layui/demo/1.png"></div>
                    <div><img src="${productimg.productImgX2}" tppabs="http://res.layui.com/static/images/layui/demo/2.png"></div>
                    <div><img src="${productimg.productImgX1}" tppabs="http://res.layui.com/static/images/layui/demo/3.png"></div>
                    <div><img src="${productimg.productImgX1}" tppabs="http://res.layui.com/static/images/layui/demo/4.png"></div>
                    <div><img src="${productimg.productImgX2}" tppabs="http://res.layui.com/static/images/layui/demo/5.png"></div>
                    <div><img src="${productimg.productImgX3}" tppabs="http://res.layui.com/static/images/layui/demo/6.png"></div>
                    <div><img src="${productimg.productImgX1}" tppabs="http://res.layui.com/static/images/layui/demo/7.png"></div>
                </div>
            </div>
            <div class="duoyu">
                <img src="../images/detail_weipinghui.png" >
            </div>
        </div>
        <!-- ===================商品价格=============== -->
        <div class="col-md-6">
            <div class="sku-name">
                ${product.productBrand}+${product.productName}+${product.productSize}
            </div>
            <div class="row price">
                <div class="col-md-10">
                    <span class="dt">闪 电 价</span>
                    <span class="price-q">￥</span>
                    <span class="price-j">${product.productPrice}</span>
                    <a href="" class="price-i">到货通知</a>
                    <!-- 倒计时 -->
                    <span class="over">距结束</span>
                    <div class="box hour"></div>
                    <span class="box_h">:</span>
                    <div class="box minute"></div>
                    <span class="box_h"> :</span>
                    <div class="box second"></div>

                </div>
                <div class="col-md-2">
                    <p class="comment">累计评价</p>
                    <a href="" class="count-comment">100+</a>
                    <p class="pro-item">温馨提示：七天可以无理由退货</p>
                </div> </div>
            <div class="row size">
                <div class="col-md-2 "><span class="col-md-2-dt1">选择版本 </span> </div>
                <div class="col-md-2"><a href="javascript:void(0)" class="col-md-2-dt Dt"><span class="text">6GB+128GB</span></a> </div>
                <div class="col-md-2"> <a href="javascript:void(0)" class="col-md-2-dt Dt"><span class="text" >8GB+128GB</span></a> </div>
                <div class="col-md-2"> <a href="javascript:void(0)" class="col-md-2-dt Dt"><span class="text">8GB+256GB</span></a> </div>
                <div class="col-md-2">  <a href="javascript:void(0)" class="col-md-2-dt Dt"><span class="text">8GB+512GB</span></a></div>
                <div class="col-md-2"> <a href="javascript:void(0)" class="col-md-2-dt  Dt"><span class="text">12GB+256GB</span></a> </div>
            </div>
            <!-- ====================================颜色选择============================================= -->
            <div class="color">
                <div class="color-a"><span class="color-a-t">颜色选择</span></div>
                <div class="color-a ">
                    <a href="javascript:void(0)" class="color-photo"></a>
                    <a href="javascript:void(0)" class="color-t Ca">怦怦粉</a>
                </div>
                <div class="color-a ">
                    <a href="javascript:void(0)" class="color-photo1"></a>
                    <a href="javascript:void(0)" class="color-t Ca">极光蓝</a>
                </div>
                <div class="color-a ">
                    <a href="javascript:void(0)" class="color-photo"></a>
                    <a href="javascript:void(0)" class="color-t Ca">逍遥青</a>
                </div>
                <div class="color-a ">
                    <a href="javascript:void(0)" class="color-photo"></a>
                    <a href="javascript:void(0)" class="color-t Ca">星迹粉</a>
                </div>
                <!-- ========================================================================================              -->
            </div>
            <!-- ====================================收货地址===================================================== -->
            <div class="address">
                <!-- <div class="address-t">配送至</div> -->
                <form action="#">
                    <label for="addr-show">配送至：
                        <input type="text" value="" id="addr-show">
                    </label>
                    <br />

                    <!--省份选择-->
                    <select id="prov" onchange="showCity(this)">
                        <option value="">-请选择省份-</option>
                    </select>

                    <!--城市选择-->
                    <select id="city" onchange="showCountry(this)">
                        <option value="">-请选择城市-</option>
                    </select>

                    <!--县区选择-->
                    <select id="country" onchange="selecCountry(this)">
                        <option value="">-请选择县区-</option>
                    </select>
                    <button type="button" class="btn met1" onClick="showAddr()">确定</button>
                </form>
            </div>
            <!-- =========================================加入购物车=============================================== -->
            <div class="car">
                <input type="text" value="1" class="car-value">
                <button class="jia G">+</button>
                <button class="jia G1">-</button>
            </div>
            <a  href="" class="buy">加 入 购 物 车</a>
            <a class="buynow" href="">去 抢 购</a>
            <input type="hidden" class="proId" value="${product.productId}">
            <input type="hidden" class="userId" value="${user.userId}">
        </div>

        <div class="col-md-2 A">
            <h3 >看了又看</h3>
            <!-- ==========================侧边图片 -->
            <a href="" ><img src="http://rjjese9pa.hd-bkt.clouddn.com/ONE1.jpg" sizes="150px 150px" alt="闪电秒杀热销TOP1">
<%--                <div >闪电秒杀热销TOP1</div>--%>
                <span>￥${product.productPrice}</span>
            </a>
            <!-- ====================侧边图片 -->
            <a href="" ><img src="http://rjjese9pa.hd-bkt.clouddn.com/ONE2.jpg" alt="闪电秒杀热销TOP2">
                <div >闪电秒杀热销TOP1</div>
                <span>￥ 2999.00</span>
            </a>
            <!-- ========================== -->
            <a href="" ><img src="http://rjjese9pa.hd-bkt.clouddn.com/ONE3.jpg" alt="闪电秒杀热销TOP3">

                <span>￥ 3999.00</span>
            </a>
            <!-- ===================== -->
            <!-- <a href="" ><img src="images/cebiantupian.jpg" alt="歌诺瑞丝连衣裙2022夏装新款时尚遮肚显瘦休闲气质减龄韩版小个子学生学院风荷叶领碎花中长裙女潮 绿色 2XL 建议140-160斤">
             <div >歌诺瑞丝连衣裙2022夏装新款时尚遮肚显瘦休闲气质减龄韩版小个子学生学院风荷叶领碎花中长裙女潮 绿色 2XL 建议140-160斤</div>
            <span>￥ 149.00</span>
            </a> -->
        </div>

    </div>
</div>
<!-- ======================================商品介绍======================== -->
<div class="row wares" style="display: block">
    <div class="col-md-6 C">
        <a href="" class="wares-introd ">商 品 介 绍</a>
    </div>
    <div class="col-md-6 C"><a href="${pageContext.request.contextPath}/personal/estimate.jsp" class="wares-introd">商 品 评 价</a></div>
</div>
<!-- =======================================图片============================= -->
<%--<div class="wares-content">--%>
<%--    <p><img style="float: right; max-width: 40%;" src="" /></p>--%>
<%--    <ul id="parameter-brand" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;">--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 485px; float: left;" title="吻瑷（wenai）">品牌：&nbsp;<a style="margin: 0px; padding: 0px; color: #5e69ad; text-decoration-line: none;" href="https://list.jd.com/list.html?cat=1315,1343,9719&amp;ev=exbrand_246771" target="_blank" rel="noopener">吻瑷（wenai）</a></li>--%>
<%--    </ul>--%>
<%--    <ul class="parameter2 p-parameter-list" style="margin: 0px; padding: 20px 0px 15px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;">--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="吻瑷连衣裙女装2022年夏季新款学院风法式复古收腰显瘦裙子夏天新品小个子韩版洋气 杏色-短 M(建议100-110斤)">商品名称：吻瑷连衣裙女装2022年夏季新款学院风法式复古收腰显瘦裙子夏天新品小个子韩版洋气 杏色-短 M(建议100-110斤)</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="10053525262291">商品编号：10053525262291</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="吻瑷旗舰店">店铺：&nbsp;<a style="margin: 0px; padding: 0px; color: #5e69ad; text-decoration-line: none;" href="https://mall.jd.com/index-662918.html?from=pc" target="_blank" rel="noopener">吻瑷旗舰店</a></li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="300.00g">商品毛重：300.00g</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="中国大陆">商品产地：中国大陆</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="6371">货号：6371</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="其他100%">材质：其他100%</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="A型">廓形：A型</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="高腰">腰型：高腰</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="长裙">裙长：长裙</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="18-24周岁">适用年龄：18-24周岁</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="POLO领">领型：POLO领</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="纽扣，蝴蝶结，露脐/腰">流行元素：纽扣，蝴蝶结，露脐/腰</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="百褶裙">裙型：百褶裙</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="短袖">袖长：短袖</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="常规袖">袖型：常规袖</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="套头">衣门襟：套头</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="纯色">图案：纯色</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="2022年夏季">上市时间：2022年夏季</li>--%>
<%--        <li style="margin: 0px 0px 5px; padding: 0px 0px 0px 42px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; float: left;" title="日韩风">风格：日韩风</li>--%>
<%--    </ul>--%>
<%--</div>--%>
<%--<p>&nbsp;</p>--%>
<%--<ul id="parameter-brand1" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;"></ul>--%>
<%--<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img30.360buyimg.com/imgzone/jfs/t1/148781/38/25963/249487/6296ddbbE9c9e6b19/2f7652cb1eadb0fe.jpg.avif" alt="" width="750" height="927" /></p>--%>
<%--<!-- =============================== -->--%>
<%--<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img10.360buyimg.com/imgzone/jfs/t1/215853/7/19172/538230/6296ddc0E5a314e4a/c463276cad727d3a.jpg.avif" alt="" width="750" height="1001" /></p>--%>
<%--<ul id="parameter-brand2" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;"></ul>--%>
<%--<p>&nbsp;</p>--%>


<%--<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img10.360buyimg.com/imgzone/jfs/t1/207135/17/22060/477915/6296ddcbE99a07316/5cfe43b56eeb073f.jpg.avif" alt="" width="750" height="1001" /></p>--%>
<%--<ul id="parameter-brand3" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;"></ul>--%>
<%--<p>&nbsp;</p>--%>

<%--<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img10.360buyimg.com/imgzone/jfs/t1/8684/30/17273/240488/6296ddccEacbbeef5/bfbcfba8acf32b94.jpg.avif" alt="" width="750" height="1001" /></p>--%>
<%--<ul id="parameter-brand4" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;"></ul>--%>
<%--<p>&nbsp;</p>--%>

<%--<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img14.360buyimg.com/imgzone/jfs/t1/105006/19/29982/334687/6296ddceE7961fc85/77b38c016ceaef5b.jpg.avif" alt="" width="750" height="1001" /></p>--%>
<%--<ul id="parameter-brand5" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;"></ul>--%>
<%--<p>&nbsp;</p>--%>

<%--<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img20.360buyimg.com/imgzone/jfs/t1/128234/25/28529/252211/6296ddd1E8a0044c6/9ae949b60cef1ea3.jpg.avif" alt="" width="750" height="1001" /></p>--%>
<%--<ul id="parameter-brand6" class="p-parameter-list" style="margin: 0px; padding: 20px 0px 0px; list-style: none; overflow: hidden; color: #666666; font-family: tahoma, arial, 'Microsoft YaHei', 'Hiragino Sans GB', u5b8bu4f53, sans-serif; font-size: 12px; background-color: #ffffff;"></ul>--%>
<%--<p>&nbsp;</p>--%>
${gbk}

<img src="../images/jd_bottom.png" class="bottom">


<script src="../layui/layui.js"></script>
<script src="../js/detail.js"></script>
<script src="../js/detail_city.js"></script>
<script src="../js/detail_method01.js"></script>
<script>
<%--    倒计时--%>
    console.log($(".timeEnd").text())
    var t=$(".timeEnd").text()
    console.log(t.replace("/","-"))
    var tt=t.replace("/","-")
    console.log(tt.replace("/","-"))
    console.log(typeof tt)
    // 倒计时
    var hour=document.querySelector('.hour')
    var minute=document.querySelector('.minute')
    var second=document.querySelector('.second')
    //获取截止时间的时间戳（单位毫秒）

    var inputTime = +new Date("2022-11-09 12:00:00");
    console.log(inputTime)
    //我们先调用countDown函数，可以避免在打开界面后停一秒后才开始倒计时
    countDown();
    //定时器 每隔一秒变化一次
    setInterval(countDown, 1000);
    function countDown() {
        //获取当前时间的时间戳（单位毫秒）
        var nowTime = +new Date();
        //把剩余时间毫秒数转化为秒
        var times = (inputTime - nowTime) / 1000;
        //计算小时数 转化为整数
        var h = parseInt(times / 60 / 60 % 24);
        //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
        hour.innerHTML = h < 10 ? "0" + h : h;
        //计算分钟数 转化为整数
        var m = parseInt(times / 60 % 60);
        //如果分钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
        minute.innerHTML = m < 10 ? "0" + m : m;
        //计算描述 转化为整数
        var s = parseInt(times % 60);
        //如果秒钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
        second.innerHTML = s < 10 ? "0" + s : s;
    }
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;
        carousel.render({
            elem: '#test10'
            ,width: '350px'
            ,height: '350px'
            ,interval: 5000
        });
    })
</script>

</body>
</html>